<template>
  <div class="content industry-jpg3">
    <div class="industry">
      <div class="industry-row">
        <div>
          <div class="industry-title">
            <p>2017海宁市规上工业等价能耗情况<i class="gl"></i><i class="gl"></i></p>
          </div>
          <table class="industry-table industry-sub3-table">
            <thead>
              <tr>
                <th rowspan="2">月份</th>
                <th colspan="5">综合能源消费量（等价）</th>
                <th colspan="3">电力消费（千万瓦时）</th>
              </tr>
              <tr>
                <th>本期</th>
                <th>同期</th>
                <th>增长（%）</th>
                <th>增加值增速（%）</th>
                <th>增加值能耗增速（%）</th>
                <th>本期</th>
                <th>同期</th>
                <th>增长率（%）</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in 12" :key="item.index">
                <td :style="{color: '#0ff6fc'}">2017-02</td>
                <td>256</td>
                <td>245</td>
                <td>4.3</td>
                <td>2.4</td>
                <td>3.02</td>
                <td>79</td>
                <td>96</td>
                <td>0.4</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="industry-row">
        <div class="industry-box">
          <div class="industry-title">
            <p>2017综合能源消费趋势分析<i class="gl"></i><i class="gl"></i></p>
          </div>
          <chart :options="chart1" :theme="chartTheme" auto-resize></chart>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'industryC',
  data () {
    return {
      chartTheme: {},
      chart1: {
        tooltip : {
          trigger: 'axis',
          axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis : [
          {
            type : 'category',
            data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis : [
          {
            name: '消费量（亿元）',
            type : 'value',
          },
          {
            name: '增速（%）',
            type : 'value',
          },
        ],
        legend: {
          data: ['本期','同期','增速']
        },
        series : [
          {
            name:'本期',
            type:'bar',
            barWidth: '20%',
            data:[10, 52, 200, 334, 390, 330, 220],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[
                  {offset: 0, color: '#50debe'},
                  {offset: 1, color: '#1ac6da'}
                ]),
              }
            }
          },
          {
            name:'同期',
            type:'bar',
            barWidth: '20%',
            data:[10, 52, 200, 334, 390, 330, 220],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[
                  {offset: 0, color: '#f569cc'},
                  {offset: 1, color: '#8b33cf'}
                ]),
              }
            }
          },
          {
            name:'增速',
            type:'line',
            smooth: false,
            symbolSize: 6,
            yAxisIndex: 1,
            lineStyle: {
              width: 3,
              shadowColor: 'rgba(201, 025, 100, 0.5)',
              shadowOffsetY: 4,
              shadowBlur: 10
            },
            data:[2, 5.2, 5.4, 5.8, 7.0, 7.8, 8.0],
            itemStyle: {
              normal: {
                color: '#fd8d53'
              }
            }
          }
        ]
      }
    }
  },
  mounted: function () {
    this.$http('/vqdisplay/static/HospitalChartTheme.json')
    .then( (response) => {
      this.chartTheme = response.data
    })

  },
}
</script>

<style scoped>
  @import '../../../style/industry.css';
  .echarts {
    height: 80%;
    width: 100%;
  }
</style>